<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播与模态框示例</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 轮播图容器 -->
    <div class="carousel-container">
        <div class="carousel-wrapper">
            <div class="carousel-slide">
                <img src="./img/1 (1).png" alt="轮播图1">
            </div>
            <div class="carousel-slide">
                <img src="./img/1 (2).png" alt="轮播图2">
            </div>
            <div class="carousel-slide">
                <img src="./img/1 (3).png" alt="轮播图3">
            </div>
        </div>
        
        <!-- 轮播图控制按钮 -->
        <button class="carousel-button prev">&lt;</button>
        <button class="carousel-button next">&gt;</button>
        
        <!-- 轮播图指示器 -->
        <div class="carousel-indicators">
            <span class="indicator active" data-index="0">1</span>
            <span class="indicator" data-index="1">2</span>
            <span class="indicator" data-index="2">3</span>
        </div>
    </div>

    <!-- 图片模态框 -->
    <div class="modal" id="imageModal">
        <span class="close-modal">&times;</span>
        <img src="" alt="放大图片" class="modal-content">
    </div>

    <script src="./script.js"></script>
</body>
</html>